Show and Hide the Toast: DevExtreme

#Show and Hide the Toast: DevExtreme| 来源: 网络整理| 查看: 265

To execute certain commands before or after the Toast was shown/hidden, handle the showing, shown, hiding or hidden event. If the event handling function is not going to be changed during the lifetime of the UI component, assign it to the corresponding onEventName property:

jQuery JavaScript$(function() { $("#toastContainer").dxToast({ // ... onShowing: function (e) { // Handler of the "showing" event }, onShown: function (e) { // Handler of the "shown" event }, onHiding: function (e) { // Handler of the "hiding" event }, onHidden: function (e) { // Handler of the "hidden" event } }); }); Angular HTMLTypeScript import { DxToastModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { onShowing (e) { // Handler of the "showing" event }, onShown (e) { // Handler of the "shown" event }, onHiding (e) { // Handler of the "hiding" event }, onHidden (e) { // Handler of the "hidden" event } } @NgModule({ imports: [ DxButtonModule, DxToastModule, // ... ], // ... }) Vue import 'devextreme/dist/css/dx.light.css'; import { DxToast } from 'devextreme-vue/toast'; import { DxButton } from 'devextreme-vue/button'; export default { components: { DxToast, DxButton }, methods: { onShowing(e) { // Handler of the 'showing' event }, onShown(e) { // Handler of the 'shown' event }, onHiding(e) { // Handler of the 'hiding' event }, onHidden(e) { // Handler of the 'hidden' event } } } React import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Toast } from 'devextreme-react/toast'; import { Button } from 'devextreme-react/button'; class App extends React.Component { onShowing(e) { // Handler of the 'showing' event } onShown(e) { // Handler of the 'shown' event } onHiding(e) { // Handler of the 'hiding' event } onHidden(e) { // Handler of the 'hidden' event } render() { return ( ); } } export default App;

If you are going to change event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to the events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript const hiddenEventHandler1 = function (e) { // First handler of the "hidden" event }; const hiddenEventHandler2 = function (e) { // Second handler of the "hidden" event }; $("#toastContainer").dxToast("instance") .on("hidden", hiddenEventHandler1) .on("hidden", hiddenEventHandler2); See Also Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout Toast - Customize the Content Toast - Resize and Relocate Toast Demos Toast API Reference

【本文地址】

公司简介

联系我们